<!-- 页面标注调试用的页面 -->
<html>
	<head>
		 <meta charset="UTF-8" />
		 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		 <!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=e1055c36e70588515b90f03a62e02c09" type="text/javascript"></script> -->
		 <title>主体标注</title>
		 <style>
			 body{
				 padding: 0px;
				 margin-left: 0px;
			 }
			 #map {
				 width: 100%;
				 height: 100%;
			 }
			 .point {
			 	position: fixed;
			 	z-index: 10;
			 	bottom: 270px;
			 	left: 20px;
			 	background-color: #FFFFFF;
			 	width: 50px;
			 	height: 50px;
			 	display: flex;
			 	align-items: center;
			 	justify-content: center;
			 }
			 
			 .bottom-content{
			 	position: fixed;
			 	bottom: 0px;
			 	height: 240px;
			 	width: 100%;
			 	padding-top: 20px;
				background-color: #fff;
				z-index: 20;
			 }
			 .point-item{
			 	padding: 5px 10px;
			 	display: flex;
			 	flex-direction: row;
			 	justify-content: flex-start;
			 	align-items: center;
			 }
			 .point-icon{
			 	width: 25px;
			 	height: 25px;
			 }
			 .point-text{
			 	color: black;
			 	font-size: 14px;
			 	margin-left: 5px;
			 }
			 .point-input{
			 	width: 60%;
			 	height: 40px;
			 	margin-left: 10px;
			 	margin-right: 10px;
			 	padding: 0px 5px ;
			 	border: 1px solid #e8e8e7;
			 } 
			 .navigator{
				 top:0px;
				 display: flex;
				 flex-direction: row;
				 justify-content: space-between;
				 align-items: center;
				 height: 60px;
				 position: fixed;
				 z-index:80;
				 width: 100%;
				 background-image: url('img/inspectBg.png');
				 background-size: cover;
			 }
			 .navigator-left{
				 width: 30px;
				 height: 30px;
			 }
			 .navigator-title{
				 color: #FFFFFF;
				 font-size: 20px;
			 }
			 
			 .bottom-btn { 
			 	width: 100%; 
				margin-top: 10px; 
			 	display: flex;
			 	flex-direction: row;
			 	align-items: center;
			 	justify-content: space-around;
			 }
			 
			 .cancell-btn {
			 	width: 150px;
			 	height: 30px;
			 	text-align: center; 
			 	color: black;
			 	font-size: 20rpx;
			 	border: 1px solid #d8d8d8;
				border-radius: 5px;
			 }
			 
			 .confirm-btn {
			 	width: 150px;
			 	height: 30px;
			 	text-align: center; 
			 	color: #ffffff;
			 	font-size: 20rpx;
			 	border: 1px solid #2543f1;
			 	background-color: #2543f1;
				border-radius: 5px;
			 }
			 
			 .search-btn {
			 	width: 50px;
			 	height: 30px;
			 	text-align: center; 
			 	color: #ffffff;
			 	font-size: 20rpx;
			 	border: 1px solid #2543f1;
			 	background-color: #2543f1;
				border-radius: 5px;
			 }
			 
			 .search-content{
				 display: flex;
				 flex-direction: column;
				 justify-content: flex-start;
				 align-items: flex-start;
				 height: 500px;
				 position: fixed;
				 z-index:80;
				 bottom: 0px;
				 width: 100%;
				 border-radius: 15px 15px 0px 0px;
				 background-color: #ffffff;
				 padding-top: 5px;
				 display: none;
			 }
			 .search-list{
				 width: 100%;
				 display: flex;
				 flex-direction: column;
				 justify-content: flex-start;
				 align-items: flex-start;
				 height: 450px;
				 overflow-y: auto; 
			 }
			 .search-item{
				 display: flex;
				 flex-direction: column;
				 justify-content: flex-start;
				 align-items: flex-start;
				 border-bottom: 1px solid #e8e8e7;
				 padding: 10px 10px; 
				 box-sizing: border-box;
				 width: 100%;
			 }
			 .search-name{
				 color: #767676;
				 font-size: 15px;
			 }
			 .search-address{
				 margin-top: 3px;
				 color: #b6b6b6;
				 font-size: 13px;
			 }
			 
		 </style>
	</head>
	<body onload="initScript()">
		<div class="navigator">
			<!-- 导航 -->
			<div style="width: 60px;" onclick="bacPage()">
				<img src="img/left.png" class="navigator-left" />
			</div>
			<span class="navigator-title">主体标注</span>
			<span style="visibility: hidden;">主体标注</span>
		</div>
		<div class="point" onclick="getCurrentPoint()">
			<img src="img/point4.png" style="width: 40px;height: 40px;" />
		</div>
		<div class="bottom-content">
			<div class="point-item">
				<span class="point-text">搜索地点</span>
				<input class="point-input" id="companyName"  placeholder="请输入搜索地点"   />
				<button class="search-btn" onclick="startSearch()">搜索</button> 
			</div>
			<div class="point-item">
				<img  src="img/point4.png" class="point-icon" />
				<span class="point-text">点击重新获取当前设备位置</span>
			</div> 
			<div class="point-item">
				<img  src="img/point2.png" class="point-icon" style="width: 16px;margin-left: 5px;" />
				<span class="point-text" style="margin-left: 10px;">滑动屏幕进行标注</span>
			</div> 
			<div class="point-item">
				<img  src="img/yuandian.png" class="point-icon" />
				<span class="point-text">当前设备GPS坐标位置</span>
			</div>
			<div class="point-item">
				<img  src="img/point.png" class="point-icon"  style="width: 16px;margin-left: 5px;"/>
				<span class="point-text"  style="margin-left: 10px;">企业坐标位置</span>
			</div>
			
			<!-- 屏幕中心获取企业位置 -->
			<div class="bottom-btn">
				<button onclick="pointConfirm()" class="confirm-btn" type="buttom" style="color: #ffffff;"> 确定</button>
				<button onclick="bacPage()" class="cancell-btn" type="buttom">取消</button>
			</div>
		</div>
		<!-- 搜索结果 -->
		<div class="search-content" id="searchContent" >
			<div class="search-list" id="content"  onscroll="checkScroll(this)" ></div>
			<div class="bottom-btn" style=""> 
				<button onclick="closeSearch()" class="cancell-btn" type="buttom">关闭</button>
			</div>
		</div>
		<div style="position: absolute;z-index:2" id="map"></div>
	</body>   
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/uni.webview.1.5.6.js"></script>
	<script type="text/javascript">
	var keurealy = false;
		function initScript(){ 
			$.get("https://111.33.173.50:8081/base/getTianKey",{},function(res){
				console.log("res",res);
				var scriptS = document.createElement("script");
				scriptS.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk='+res.data;
				 scriptS.onload = function () {
					 keurealy = true;
					initMap() 
					//getCurrentPoint();
				}; 
				
				scriptS.onerror = function () {
					console.error('脚本加载失败');
				};
				
				document.head.appendChild(scriptS);
			})
		 }
		var int = null;
		document.addEventListener('UniAppJSBridgeReady', function() {
			console.log('UniAppJSBridgeReady环境已准备完成：');
			int = setInterval(function(){
				//页面完成,获取当前位置  
			 if(pageReady && keurealy){
				 clearInterval(int);
				 getCurrentPoint();
			 }
			},500)
		});
	
		var  map = null;// 地图实例
		var  pageReady = false; //map加载状态
		var  markerTool = null; //标注工具对象
		var  labelMarker = null; //标注工具对象
		var  labelIcon = null; //标注图标
		var  localsearch = null; //地图搜索对象
		//初始化地图
		function initMap(){
			//获取参数
			var params = getUrlParams(); 
			var lng = params.lng;
			var lat = params.lat;  
			setTimeout(function(){
				// 初始化地图
				map =  new T.Map('map');
				if(lng != null && lng != '' && lng != 'undefined' && lat != null && lat != 'undefined' && lat != '' ){
					//企业当前定位
					map.centerAndZoom(new T.LngLat(lng, lat), 12); 
					  //创建标注对象
					 var icon = new T.Icon({
						  iconUrl: "img/point.png",
						  iconSize: new T.Point(19, 27) 
					  });
					var marker = new T.Marker(new T.LngLat(lng, lat), {icon: icon});
					//向地图上添加标注
					map.addOverLay(marker); 
				}
			 	//初始化一个标注工具图标
				labelIcon = new T.Icon({
					  iconUrl: "img/point2.png",
					  iconSize: new T.Point(19, 27) 
				});  
				//监听地图移动 
				map.addEventListener("move",function(e){ 
					updateLableMarker(e.target.getCenter().lng, e.target.getCenter().lat);
				}) 
				 //创建搜索对象
				localsearch = new T.LocalSearch(map, {
					 pageCapacity: 10,	
					onSearchComplete: localSearchResult
				});
				 
				pageReady = true;
			},500);
		} 
		
		
		
		
		/**
		 * 提交地图标注信息
		 */
		function pointConfirm(){
			var  lngLat  = labelMarker.getLngLat(); 
			uni.postMessage({
				data:{type: 'result',  lng: lngLat.lng, lat: lngLat.lat, }
			})
		}
		//-----------------------------搜索-start-----------------------------
		var lastPage = false;//搜索结果是否最后一页
		/**
		 * 点击搜索按钮
		 */
		function startSearch(){
			//清空历史搜索结果
			var  searchContent = document.getElementById("content");
			searchContent.innerHTML = '';
			lastPage = false;
			localsearch.search(document.getElementById('companyName').value);
			var searchBox = document.getElementById("searchContent");
			searchBox.style.display = 'block'
		}
		/**
		 * 地图关键字搜索结果
		 */
		function localSearchResult(result){
			if(result.getPois()){
				var  searchContent = document.getElementById("content");
				var  content = "";
				var pois =result.getPois(); 
				if(lastPage){
					//最后一页了
					return;
				}
				for (var i = 0; i < pois.length; i++) {  
					var lnglatArr = pois[i].lonlat.split(",");
					content = content + `<div class="search-item"  onclick="selectCompany('${pois[i].lonlat}')" >
							<span class="search-name">${pois[i].name}</span>
							<span class="search-address">坐标:${pois[i].lonlat}</span>
							<span class="search-address">地址:${pois[i].address}</span>
						</div>`
				}
				searchContent.innerHTML = searchContent.innerHTML + content;
				if(pois.length < 10){
					lastPage = true;
				}
			}
		}
		
		/**
		 * 选中某个企业之后中心移动到此位置
		 * @param {Object} lngLat
		 */
		function selectCompany(lngLat){
			var searchBox = document.getElementById("searchContent");
			searchBox.style.display = 'none'
			if(lngLat != null &&  lngLat != ''){
				var point = new T.LngLat( lngLat.split(',')[0], lngLat.split(',')[1]);
				//移动到这个位置 
				map.panTo(point);
				return;
			} 
			plus.nativeUI.toast('没有坐标信息!');
		}
		/**
		 * 关闭搜索
		 */
		function closeSearch(){
			var searchBox = document.getElementById("searchContent");
			searchBox.style.display = 'none'
		}
		
		function checkScroll(that){ 
			var content = document.getElementById("content"); 
		   if (that.scrollTop + that.clientHeight >= that.scrollHeight-30) {
			 // 加载下一页内容的操作
			 // 比如向服务器请求数据，然后将新内容添加到div中
			 localsearch.nextPage();
		   } 
		} 
		
		//---------------------------搜索end----------------------------
		
		/**
		 * 更新中间点的标注位置
		 * @param {Object} lng
		 * @param {Object} lat
		 */
		function updateLableMarker(lng,lat){
			if(labelMarker){
				labelMarker.setLngLat(new T.LngLat(lng,lat));
			}
		}
		
		 /**
		  * 获取当前位置
		  */
		function getCurrentPoint(){ 
			plus.nativeUI.showWaiting('获取位置信息');
			plus.geolocation.getCurrentPosition(function(p){ 
				//创建标注对象
				var icon2 = new T.Icon({
					iconUrl: "img/yuandian.png",
					iconSize: new T.Point(19, 19) 
				});
				//使用的是GPS定位
				var point = new T.LngLat( p.coords.longitude, p.coords.latitude);
				var marker2 = new T.Marker(point, {icon: icon2});
				//向地图上添加标注
				map.addOverLay(marker2);
				//移动到这个位置 
				map.panTo(point);
				//获取地图中心点坐标 
				labelMarker = new T.Marker(new T.LngLat( map.getCenter().getLng(), map.getCenter().getLat()), {icon: labelIcon});
				//向地图上添加标注
				map.addOverLay(labelMarker);
 
				plus.nativeUI.closeWaiting();
			}, function(e){
				plus.nativeUI.closeWaiting();
				plus.nativeUI.toast('获取位置失败!') 
			}, {enableHighAccuracy:true,timeout:30000,provider:"system"});
		}
		
		//获取链接参数
		function getUrlParams() {
		    var url = window.location.href;
		    var params = url.split('?')[1];
		    var paramsObj = {};
		
		    if(params){
		        var paramArray = params.split('&');
		        paramArray.forEach(function(param){
		            var paramSplit = param.split('=');
		            paramsObj[paramSplit[0]] = paramSplit[1];
		        });
		    }
		    return paramsObj;
		}


		function bacPage(){
			console.log('返回')
			uni.postMessage({
				data:{type:'back'}
			})
		}
	</script>
</html>